<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24" :xs="24">
        <el-form
          ref="queryForm"
          :model="orderItemVo"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="订单编号" prop="orderNo">
            <el-input
              v-model="orderItemVo.orderNo"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter.native="handleQueryOrder"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="handleQueryOrder"
            >读取订单数据</el-button>
          </el-form-item>
          <el-form-item label="ItemId" prop="ItemId">
            <el-input
              v-model="orderItemVo.categoryId"
              placeholder="请输入商品编号"
              clearable
              @keyup.enter.native="handleEnterItem"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              :disabled="BtnDisabled"
              @click="handleEnterItem"
            >录入待支付商品</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-collapse v-model="activeCollapseName">
        <el-collapse-item title="订单信息" name="one">
          <el-form :model="orderInfoForm" label-width="120px">
            <el-form-item label="订单ID:" hidden>{{ orderInfoForm.order.orderId }}</el-form-item>
            <el-col :span="12">
              <el-card>
                <el-col :span="64">
                  <el-form-item label="订单时间:">{{ orderInfoForm.order.saleDatetime }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="总价格:">{{ orderInfoForm.order.totalAmount }}</el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <el-col :span="6">
                  <el-form-item label="已销售商品数:">
                    <div class="card-panel-num1">{{ orderInfoForm.quantity }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="超时未支付商品:">
                    <div class="card-panel-num2">{{ orderInfoForm.exceedQuantity }}</div>
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="4">
        <el-button type="danger" round icon="el-icon-delete" @click="clearAllData"> 取消支付 </el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="success" round icon="el-icon-check" :disabled="BtnDisabled" @click="confirmSubmit"> 确认支付 </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
          <el-tab-pane label="待支付商品" name="first">
            <el-table :data="enterItemList">
              <el-table-column label="序号" align="center" prop="" width="55" />
              <el-table-column label="商品ID" align="center" prop="itemId" />
              <el-table-column label="类别编号" align="center" prop="categoryId" />
              <el-table-column label="商品名称" align="center" prop="itemName" />
              <el-table-column label="商品价格" align="center" prop="price" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已销售商品" name="second">
            <el-table :data="SaledItemList">
              <el-table-column label="商品ID" align="center" prop="itemId" />
              <el-table-column label="类别编号" align="center" prop="categoryId" />
              <el-table-column label="商品名称" align="center" prop="itemName" />
              <el-table-column label="商品价格" align="center" prop="price" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { enterItem, getOrderInfo, confirmPay } from '@/api/orderItem'
export default {
  name: 'Pay',
  data() {
    return {
      // 购买按钮状态
      BtnDisabled: false,
      // 待支付商品列表
      enterItemList: [],
      // 已购买商品列表
      saledItemList: [],
      // 录入商品vo
      orderItemVo: {
        orderNo: undefined,
        itemNo: undefined
      },
      // 订单及业务信息
      orderInfoForm: {
        quantity: undefined,
        exceedQuantity: undefined,
        order: {
          orderItemId: undefined,
          orderId: undefined,
          itemId: undefined,
          salePrice: undefined,
          quantity: undefined
        }
      },
      // 激活的tab名称
      activeTabName: 'first',
      // 展开的折叠面板
      activeCollapseName: 'one'
    }
  },
  created() {

  },
  methods: {
    /** 查询订单信息 */
    handleQueryReader() {
      getOrderInfo(this.orderItemVo).then((response) => {
        this.orderInfoForm = response.data;
        this.saledItemList = response.data.order.itemList;
        const num = this.orderInfoForm.exceedQuantity;
        if (num > 0) {
          this.BtnDisabled = true
        }
      })
      this.activeTabName = 'second'
    },
    /** 录入待购买商品 */
    handleEnterItem() {
      this.activeTabName = 'first'
      enterItem(this.orderItemVo).then((response) => {
        this.enterItemList = response.data;
      })
    },

    /** 切换tab
    handleTabClick(tab, event) {
    },
    /** 确认购买 */
    confirmSubmit() {
      confirmPay(this.orderItemVo).then((response) => {
        const flag = response.data
        if (flag) {
          this.clearAllData()
          this.$message.success('支付成功')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    /** 清除数据 */
    clearAllData() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang="scss" scoped>
  .card-panel-num1 {
    font-size: 30px;
    color: #40c9c6;
  }
  .card-panel-num2 {
    font-size: 40px;
    color: #eb0f0f;
  }
  .mb8 {
    margin-bottom: 8px;
  }
</style>
